<template>
  <v-container class="home">
    <v-row justify="center">
      <v-col cols="6">
        <v-card class="mx-auto">
          <v-card-text class="text-center pb-15">
            <div class="text-h3 pa-15 font-weight-black">{{name}}</div>
            <div class="text-h1 pa-5 font-weight-black">{{seatNum}}</div>
          </v-card-text>
          <v-card-actions class="pa-0" v-show="seatNums.length>0">
            <v-btn
              dark
              block
              depressed
              ripple
              height="60"
              :color="color"
              class="text-h6"
              @click="play()"
              v-if="nextStatue"
            >{{btnText}}</v-btn>
            <v-btn
              dark
              block
              depressed
              ripple
              height="60"
              color="yellow lighten-1"
              class="text-h6"
              @click="next()"
              v-else
            >下一位</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
      <v-col>
        <listPlayer :listPlayer='listPlayer' />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { Vue, Component } from "vue-property-decorator";
import listPlayer from "../components/ListPlayer";
@Component({
  components: { listPlayer }
})
export default class Home extends Vue {
  seatNum = 0;
  seatNums = [];
  color = "#00c9b7";
  btnText = "开始抽签";
  timer = null;
  index = 0;
  indexNum = 0;
  nextStatue = true;
  listPlayer = [];

  play() {
    if (!this.timer) {
      this.btnText = "暂停抽签";
      this.timer = setInterval(this.rand, 10);
      this.color = "#845ec2";
    } else {
      this.color = "#00c9b7";
      this.nextStatue = false;
      clearInterval(this.timer);
      this.btnText = "开始抽签";
      this.timer = null;
      const num = this.seatNums.splice(this.indexNum, 1)[0];
      const player = this.$store.state.players[this.index];
      player.num = num;
      this.listPlayer.push(player);
    }
  }
  next() {
    this.index += 1;
    this.seatNum = 0;
    this.nextStatue = true;
  }
  rand() {
    if (this.$store.state.players.length <= 0) {
      this.seatNum = 0;
      return;
    }
    this.indexNum = Math.floor(Math.random() * this.seatNums.length);
    this.seatNum = this.seatNums[this.indexNum];
  }
  created() {
    this.seatNums = [...Array(this.$store.state.players.length)].map(
      (k, i) => i + 1
    );
  }
  get name() {
    if (this.seatNums.length <= 0) {
      this.seatNum = 0;
      return "没了！";
    } else {
      return this.$store.state.players[this.index].name;
    }
  }
}
</script>
